<template>
  <f7-page no-toolbar no-navbar no-swipeback login-screen>
    <f7-navbar title="login">
      <f7-nav-right>
        <p @click="close1" class="back1">Close</p>
      </f7-nav-right>
    </f7-navbar>
    <f7-block class="hotel">
      <!-- <f7-login-screen-title>Hotel</f7-login-screen-title> -->
      <div class="icon2">
      <f7-icon f7="logo_googleplus" size="80px" color="#206ce4"></f7-icon>
    </div>
    </f7-block>

    <f7-list class="input">
      <f7-list-input
        label="Username"
        type="text"
        placeholder="Your username"
        :value="username"
        @input="username = $event.target.value"
        required
        validate
        error-message="请输入用户名"
      ></f7-list-input>
      <f7-list-input
        label="Password"
        type="password"
        placeholder="Your password"
        :value="password"
        @input="password = $event.target.value"
        required
        validate
        error-message="请输入密码"
      ></f7-list-input>
    </f7-list>
    <mt-button :disabled="disabled" type="primary" @click="denglu">登录</mt-button>
    <f7-block-footer>
      欢迎光临hotel
      <br>请输入用户名和密码
    </f7-block-footer>
    <div class="icon1">
      <f7-icon f7="logo_facebook"></f7-icon>
      <f7-icon f7="logo_twitter"></f7-icon>
      <f7-icon f7="logo_linkedin"></f7-icon>
    </div>
  </f7-page>
</template>
<script>
import axios from "axios";
export default {
  computed: {
    disabled() {
      return !(this.password && this.username);
    }
  },
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    denglu() {
      const self = this;
      const app = self.$f7;
      let apiLogin = {
        Username: this.username,
        Password: this.password,
      };
      this.$store.commit("setapiLogin", apiLogin);
      var config = {
        headers: {
          "content-type": "application/x-www-form-urlencoded"
        }
      };
      URL = "/caofuying/user/selectuserPermissions";
      axios
        .get(
          URL,
          {
            params: {
              Username: this.username,
              Password: this.password
            }
          },
          config
        )
        .then(r => {
          const { data } = r;
          if (data == "1") {
            this.$f7router.navigate("/supertubelist/");
          } else if (data == "2") {
            this.$f7router.navigate("/backgroundhome/");
          } else if (data == "5") {
            app.dialog.alert("服务器错误");
          } else {
            app.dialog.alert("您输入的密码或者用户名有误");
          }
        });
    },
    close1() {
      this.$f7router.back("/");
    }
  }
};
</script>
<style scoped>
.icon1 {
  text-align: center;
  color: #206ce4
}
.hotel {
  top: 15%;
  text-align: center;
}
.input {
  top: 15%;
}
.mint-button.mint-button--primary.mint-button--normal {
  display: block;
  width: 90%;
  margin: 0 5% 0 5%;
  margin-top: 40%;
  height: 7%;
}
.type {
  top: 20%;
}
p {
  padding-right: 1em;
  color: #206ce4;
}
</style>
